<template>
	<view class="index-list">
		<view class="index-list-header u-flex u-row-between">
			<view class="index-list-header-tab u-flex">
				<view class="index-list-header-tab-item " :class="item.id == pageType ? 'act' : ''"
					v-for="(item, index) in pageTypeList" :key="index" @click="changePageType(item)">
					{{ item.title }}
				</view>
			</view>
			<view class="index-list-header-right u-flex">
				<block v-if="pageType == 0">
					<!-- 单身 -->
					<view class="index-list-header-right-item u-flex">
						<image src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/filter.png" mode=""></image>
						<view class="" @click="changeSingleSetting">
							匹配设置
						</view>
					</view>
					<view class="index-list-header-right-item u-flex">
						<view class="">
							更多
						</view>
						<!-- <image src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/arrow-right.png" mode=""></image> -->
					</view>
				</block>
				<block v-if="pageType == 1">
					<!-- 上墙 -->
					<view class="index-list-header-right-item u-flex" @click="(sex = (sex == 0 ? 1 : 0)), getTopList()">
						<view :class="['index-list-header-right-item-switch', sex == 1 ? 'act' : '']"
							style="border-radius: 8rpx 0rpx 0rpx 8rpx;">
							男
						</view>
						<view :class="['index-list-header-right-item-switch', sex == 0 ? 'act' : '']"
							style="border-radius: 0rpx 8rpx 8rpx 0rpx;">
							女
						</view>
					</view>
					<view class="index-list-header-right-item u-flex">
						<view class="" @click="jumpTopList()">
							全部
						</view>
						<image src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/arrow-right.png" mode=""></image>
					</view>
				</block>
				<block v-if="pageType == 2">
					<!-- 业主 -->
					<view class="index-list-header-right-item u-flex">
						<view class="" @click="changeMasterFilterShow()">
							筛选
						</view>
						<image src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/arrow-right.png" mode=""></image>
					</view>
				</block>
			</view>
		</view>
		<view class="index-list-main" v-if="pageType == 0">
			<!-- 单身列表item -->
			<index-list-singleitem :lists="list"></index-list-singleitem>
		</view>
		<view class="index-list-main" v-if="pageType == 1">
			<!-- 上墙列表item -->
			<index-list-topitem :lists="list"></index-list-topitem>
		</view>
		<view class="index-list-main" v-if="pageType == 2">
			<!-- 业主列表item -->
			<index-list-masteritem :lists="list"></index-list-masteritem>
		</view>
		<!-- 单身匹配设置 -->
		<u-popup v-model="singleRankSettingShow" mode="bottom" border-radius="20">
			<index-singleranksetting v-if="singleRankSettingShow" @getFrom="getFrom()"
				@shows="opShow()"></index-singleranksetting>
		</u-popup>
		<!-- 上墙按钮 -->
		<view class="add-to-top" v-if="pageType == 1" @click="addToTop()">
			上墙
		</view>
		<!-- 上墙弹窗 -->
		<u-popup v-model="addToTopShow" mode="center" border-radius="20">
			<index-list-topaddpop @close="addToTopShow = false" :types="type"></index-list-topaddpop>
		</u-popup>
		<!-- 业主筛选 -->
		<u-popup v-model="masterFilterShow" mode="bottom" border-radius="20">
			<index-listmasterfilter v-if="masterFilterShow"></index-listmasterfilter>
		</u-popup>
		<popup ref="popup">
			<view class="popup">
				<image class="popup-vip" src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/swiper-vip.png" mode=""></image>
				<view class="popup-te">8项特权</view>
				<swiper class="swiper" circular :indicator-dots="indicatorDots" :interval="interval" :duration="duration"
					@change="change">
					<swiper-item v-for="(item, index) in swiperList" :key="index">
						<view class="swiper-item">
							<image class="popup-icon" :src="item.icon" mode=""></image>
							<view class="popup-title">{{ item.title }}</view>
							<view class="popup-desc">{{ item.desc }}</view>
						</view>
					</swiper-item>
				</swiper>
				<view class="dtos">
					<view class="dto" :class="{ 'dto-active': index === currIndex }" v-for="(item, index) in swiperList"
						:key="index">
					</view>
				</view>
				<view class="btns">
					<image class="btns-img" src="https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/btn/220 × 42.png" mode=""></image>
					<view class="btns-con" @click="openVip()">
						立即开通
					</view>
				</view>
				<view class="close" @click="closes()">
					取消
				</view>
			</view>
		</popup>
	</view>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
import indexListSingleitem from '../index-list-singleitem/index-list-singleitem.vue'
import indexListTopitem from '../index-list-topitem/index-list-topitem.vue'
import indexListMasteritem from '../index-list-masteritem/index-list-masteritem.vue'
import indexSingleranksetting from '../index-singleranksetting/index-singleranksetting.vue'
import indexListTopaddpop from '../index-list-topaddpop/index-list-topaddpop.vue'
import indexListmasterfilter from '../index-list-masterfilter/index-list-masterfilter.vue'
import popup from '../popup/index.vue'
export default {
	// 组件名称
	name: 'demo',
	// 组件参数 接收来自父组件的数据
	props: {
		pageType: {
			type: Number,
			default: 0, // 0单身 1上墙 2业主
		}
	},
	// 局部注册的组件,import引入的组件需要注入到对象中才能使用
	components: {
		popup,
		indexListSingleitem,
		indexListTopitem,
		indexListMasteritem,
		indexSingleranksetting,
		indexListTopaddpop,
		indexListmasterfilter
	},
	// 组件状态值
	data() {
		return {
			currIndex: 0,
			pageTypeList: [{
				id: 0,
				title: '单身'
			}, {
				id: 1,
				title: '上墙'
			}, {
				id: 2,
				title: '业主'
			}],
			singleRankSettingShow: false,
			addToTopShow: false,
			masterFilterShow: false,
			swiperList: [
				{
					icon: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/mission/candy-use1.png',
					title: '功能门槛',
					desc: '可免费查看访客、粉丝，2次CP组队'
				},
				{
					icon: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/mission/candy-use1.png',
					title: '功能门槛1',
					desc: '可免费查看访客、粉丝，2次CP组队'
				},
				{
					icon: 'https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/mission/candy-use1.png',
					title: '功能门槛2',
					desc: '可免费查看访客、粉丝，2次CP组队'
				},
			],
			from: {
				age: '', // 17,20  年龄
				height: '', // 170,180  身高
				education: -1, // -1均可0专科及以上，1本科及以上，2研究生及以上，3博士
				marriage: 2, // 0未，1离异，2均可
				home: '', // 2  家乡id
				money: '', // 5,10  收入
				label: '', // 9,13  标签
				school: '', // 1  学校id
				search: '', // 搜索关键词
			},
			sex: 0, // 0 女 1 男
			indicatorDots: false,
			interval: 2000,
			duration: 500,
			list: [],
			type: 0, // 0 未上墙 1 已上墙
		}
	},
	// 计算属性
	computed: {},
	// 侦听器
	watch: {},
	// 组件方法
	methods: {
		openVip() {
			this.is_vip = 1
			this.$refs.popup.hides()
		},
		opShow() {
			this.$refs.popup.show = true
			console.log(this.$refs.popup)
		},
		closes() {
			this.$refs.popup.show = false
		},
		change(s) {
			this.currIndex = s.detail.current;
		},
		//切换tab
		changePageType(item) {
			this.$emit('updateIndex', item.id)
			this.list = []
			if (item.id == 0) {
				this.getSingleList()
			} else if (item.id == 1) {
				this.getTopList()
			} else if (item.id == 2) {
				this.getMasterList()
			}
		},
		// 单身列表
		getSingleList() {
			let obj = {
				token: uni.getStorageSync('token'),
				age: this.from.age, // 17,20  年龄
				height: this.from.height, // 170,180  身高
				education: this.from.education, // -1均可0专科及以上，1本科及以上，2研究生及以上，3博士
				marriage: this.from.marriage, // 0未，1离异，2均可
				home: this.from.home, // 2  家乡id
				money: this.from.money, // 5,10  收入
				label: this.from.label, // 9,13  标签
				school: this.from.school, // 1  学校id
				search: this.from.search, // 搜索关键词
			}
			this.$http('config.single', obj, '').then(res => {
				// console.log(res, 'res')
				this.list = res.data.data
				// console.log(this.list)
			})
		},
		// 上墙列表
		getTopList() {
			let obj = {
				token: uni.getStorageSync('token'),
				sex: this.sex, // 0 女 1 男
			}
			this.$http('config.Wall', obj, '').then(res => {
				console.log(res, 'res')
				this.list = res.data.data
			})
		},
		// 业主列表
		getMasterList() {
			let obj = {
				token: uni.getStorageSync('token'),
				lat: '', // 35.11067
				lng: '', // 118.36353
				distance: 0, // 0不限，距离
				city: '', // 城市
			}
			this.$http('config.room_user', obj, '').then(res => {
				console.log(res, 'res')
				this.list = res.data.data
			})
		},
		// 单身筛选 弹窗
		getFrom(val) {
			console.log(val, 'val')
		},
		//切换单身匹配弹窗
		changeSingleSetting() {
			this.singleRankSettingShow = !this.singleRankSettingShow
		},
		//所有上墙
		jumpTopList() {
			this.$Router.push({
				path: '/pages/index/index/index-toplist',
			})
		},
		addToTop() {
			this.addToTopShow = true
			// this.$http('config.OnTheWall').then(res => {
			// 	console.log(res, 'res')
			// })
		},
		changeMasterFilterShow() {
			this.masterFilterShow = true
		}
	},
	// 以下是生命周期钩子   注：没用到的钩子请自行删除
	/**
	 * 在实例初始化之后，组件属性计算之前，如data属性等
	 */
	beforeCreate() { },
	/**
	 * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
	 */
	created() {
		this.changePageType({ id: 0 })
		// this.opShow()
	},
	/**
	 * 在挂载开始之前被调用：相关的 render 函数首次被调用。
	 */
	beforeMount() { },
	/**
	 * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
	 * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
	 */
	mounted() { },
	/**
	 * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
	 * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
	 */
	beforeUpdate() { },
	/**
	 * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
	 * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
	 */
	updated() { },
	/**
	 * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
	 */
	activated() { },
	/**
	 * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
	 */
	deactivated() { },
	/**
	 * 实例销毁之前调用。在这一步，实例仍然完全可用。
	 */
	beforeDestroy() { },
	/**
	 * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
	 * 所有的事件监听器会被移除，所有的子实例也会被销毁。
	 */
	destroyed() { }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<style scoped lang="scss">
.index-list {
	position: relative;

	&-header {
		&-tab {
			&-item {
				margin-right: 60rpx;
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #8A9199;
			}

			.act {
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 400;
				color: #2E3033;
				position: relative;
			}

			.act:after {
				content: '';
				display: block;
				position: absolute;
				left: 0;
				bottom: -8rpx;
				width: 56rpx;
				height: 4rpx;
				background: url(https://zaiyiqi-1322608024.cos.ap-nanjing.myqcloud.com/static/img/index/index-bottom.png) no-repeat;
				background-size: cover;
			}
		}

		&-right {
			&-item {
				margin-left: 32rpx;
				font-size: 24rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				color: #8A9199;
				display: flex;
				align-items: center;

				image {
					height: 32rpx;
					width: 32rpx;
				}

				&-switch {
					width: 56rpx;
					height: 40rpx;
					text-align: center;
					line-height: 40rpx;
					background: #F4F4F4;
					color: #2E3033FF;
				}

				.act {
					background: #2E3033;
					color: #FFFFFF;
				}
			}
		}
	}

	&-main {
		margin-top: 40rpx;
	}

	.add-to-top {
		position: fixed;
		right: 32rpx;
		bottom: 164rpx;
		width: 96rpx;
		height: 96rpx;
		background: linear-gradient(170deg, #B1B8FC 0%, #595FFF 100%);
		box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(10, 7, 176, 0.2);
		border-radius: 48rpx 48rpx 48rpx 48rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		color: #FFFFFF;
		text-align: center;
		padding-top: 28rpx;
	}
}

.popup {
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 60rpx 0 40rpx;

	&-vip {
		width: 84rpx;
		height: 32rpx;
		margin-bottom: 32rpx;
	}

	&-te {
		width: 112rpx;
		height: 36rpx;
		background: #FF7339;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		font-size: 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #FCFDFF;
		line-height: 36rpx;
		text-align: center;
		margin-bottom: 60rpx;
	}

	.popup-icon {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 40rpx;
	}

	.popup-title {
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #2E3033;
		margin-bottom: 16rpx;
	}

	.popup-desc {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #2E3033;
	}

	.swiper {
		width: 100%;
		height: 330rpx;
	}

	.swiper-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.dtos {
		display: flex;
		justify-content: center;
		margin-top: 22upx;
		// height: 16px;

		.dto {
			width: 12rpx;
			height: 12rpx;
			border-radius: 50%;
			background: #E7E7E7;
			margin-right: 16rpx;
		}

		.dto:last-child {
			margin-right: 0 !important;
		}

		.dto-active {
			background: #7266FF;
		}
	}

	.btns {
		margin-top: 60rpx;
		width: 440rpx;
		height: 84rpx;
		position: relative;

		&-img {
			width: 100%;
			height: 100%;
		}

		&-con {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			color: #FAFCFF;
			line-height: 84rpx;
			text-align: center;
		}
	}

	.close {
		margin-top: 32rpx;
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		color: #8A9199;
	}
}
</style>
